<template lang="pug">
.school-open-wrap
  el-form(ref="form", :model="params", :rules="rules", label-width="120px")
    el-form-item(label="学校名称：", prop="cname")
      el-input(v-model="params.cname")
    el-form-item(label="学段：", prop="period")
      el-select(v-model="params.period", @change="stageChange")
        el-option(v-for="item in stageList", :label="item.itemname", :key="JSON.stringify(item)", :value="JSON.stringify(item)")
    el-form-item(label="所在地区：", prop="area")
      el-cascader(:options="areaList", v-model="params.area", :props="{value: 'code', label: 'name'}" )
    el-form-item(label="详细地址", prop="address")
      el-input(v-model="params.address")
    el-form-item(label="开通科目：", prop="course")
      el-checkbox-group(v-model="params.course" v-if="subjectsList.length || params.course.length")
        el-checkbox(v-for="item in subjectsList", :label="JSON.stringify(item)", :key="JSON.stringify(item)") {{item.itemname}}
      span.tips(v-else) 请先选择学段
    el-form-item(label="有效期：", prop="date")
      el-date-picker(v-model="params.date", type="daterange", value-format="yyyy-MM-dd HH:mm:ss", range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期")
    el-form-item(label="学校校徽：", prop="badge")
      el-upload(action="/api/uploads", :file-list="params.fileList", :limit="1")
        el-input(v-show="false", v-model="params.badge")
        el-button(size="small" type="primary") 选择上传
    el-form-item(label="学生数量：", prop="number")
      el-input(v-model.number="params.number") 人
    el-form-item(label="评测次数：", prop="times")
      el-input(v-model.number="params.times") 次
    el-form-item(label="二级域名：", prop="domain")
      el-input(v-model="params.domain")
    el-form-item(label="校训：", prop="motto")
      el-input(type="textarea", v-model="params.motto")
    el-form-item
      el-button(type="primary" @click="submit('form')", v-if="active === 'create'") 保存
      el-button(type="primary" @click="submitUpdate('form')", v-else) 修改
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex"
export default {
  data () {
    const validatorCname = (rule, value, callback) => {
      this.isExist({cname: value, cb: (status) => {
        if (status) {
          return callback(new Error('学校名称已存在'))
        } else {
          return callback()
        }
      }})
    }
    return {
      params: {
        cname: '', // 学校名称
        period: '', // 学段
        area: [], // 省、市、区
        address: '', // 地址
        badge: '', // 校徽
        motto: '', // 校训
        course: [], // 开通学科
        date: '', // 有效期
        number: '', // 开通人数
        times: '', // 评测次数
        domain: '', // 二级域名
        badge: 'xxxxx',  //  校徽图片地址
        fileList: [] //  校徽图片地址
      },
      active: 'create',
      rules: {
         cname: [
           {required: true, message: '请输入学校名称', trigger: 'blur' },
           {max: 20, message: '学校名称长度小于20个字符', trigger: 'blur' },
           {validator: validatorCname, trigger: 'blur'}
         ],
         period: [
           { required: true, message: '请选择学段', trigger: 'change' }
         ],
         area: [
           { required: true, message: '请选择所在地区', trigger: 'change' }
         ],
         address: [
           { required: true, message: '请输入详细地址', trigger: 'blur' }
         ],
         course: [
           { type: 'array', required: true, message: '请选择开通科目', trigger: 'change' }
         ],
         date: [
           { required: true, message: '请选择有效期', trigger: 'blur' }
         ],
         badge: [
           { required: true,  message: '请上传学校校徽', trigger: 'change' }
         ],
         number: [
           { required: true,  message: '请输入学生数量', trigger: 'blur' },
           { type: 'number',  message: '请输入学生数量必须为数字', trigger: 'blur' }
         ],
         times: [
           { required: true,  message: '请输入评测次数', trigger: 'blur' },
           { type: 'number',  message: '请输入学生数量必须为数字', trigger: 'blur' }
         ],
         domain: [
           { required: true, message: '请输入二级域名', trigger: 'blur' }
         ],
         motto: [
           { required: true, message: '请输入校训', trigger: 'blur' }
         ]
      }
    }
  },
  computed: {
    ...mapState('school', {
      stageList: state => state.stageList,
      subjectsList: state => state.subjectsList,
      areaList: state => state.areaList
    }),
    ...mapState({
      setLoading: state => state.setLoading
    })
  },
  mounted () {
    let params = this.$route.params;
    this.getAreaAll();
    this.getStage();
    if (params.id) {
      this.show({
        id: params.id,
        cb: (params) => {
          Object.assign(this.params, params)
        }
      })
      this.active = 'update';
    }
  },
  methods: {
    ...mapActions('school', [
      "getAreaAll", "getSubject", "getStage",
      "create", "show", "update", "isExist"
    ]),

    // 获取学科
    stageChange () {
      let params = JSON.parse(this.params.period)
      this.getSubject(params['id'])
    },

    // 提交
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.create({params: this.params, cb: () => {
            this.$refs['form'].resetFields();
            Notification({
              message: '学校创建成功',
              type: "success"
            })
          }})
        }
      })
    },

    // 修改
    submitUpdate(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = Object.assign({}, this.params, {id: this.$route.params.id})
          this.update({params: data, cb: () => {
            Notification({
              message: '学校信息更新成功',
              type: "success"
            })
          }})
        }
      })
    },

  }
}
</script>


<style lang="stylus">
.school-open-wrap
  .el-input
    width 45%
  .el-input--suffix
    width 100%
  .tips
    color #E6A23C
    font-size 12px
</style>
